<template>
  <div @click="visible = true" class="modalcantainer">
    <slot>
      <a-input
        v-model="inputValue"
        :disabled="disabled"
        placeholder="请选择车间"
      />
    </slot>
    <div class="mask" v-if="!disabled" @click="visible = true" />
  </div>
  <a-modal title="选择车间" v-model:visible="visible" :width="1000">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>

    <a-space>
      <a-input-search
        search-button
        v-model="searchForm.keyWord"
        :style="{ width: '220px' }"
        placeholder="产品车间编码"
        @change="Search"
        @search="Search"
      />
      <a-select
        v-model="searchForm.enable"
        placeholder="状态"
        :style="{ width: '220px' }"
        @change="Search"
      >
        <a-option :value="''"> 全部 </a-option>
        <a-option :value="1"> 启用 </a-option>
        <a-option :value="2"> 停用 </a-option>
      </a-select>
    </a-space>
    <div style="height: 20px" />
    <tableTurn :tableData="getPage" ref="tableRef">
      <a-table-column
        v-for="header in headerValues"
        :key="header.name"
        :width="header.width || 200"
        :title="header.name"
        :fixed="header.fixed"
        :data-index="header.code"
        align="center"
      >
        <template #cell="{ record }" v-if="!header.code">
          <template v-if="header.name === '状态'">
            <a-typography-text type="success" v-if="record.enable === 1">
              启用
            </a-typography-text>
            <a-typography-text type="danger" v-if="record.enable === 2">
              停用
            </a-typography-text>
          </template>
        </template>
      </a-table-column>
      <a-table-column :width="80" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-space>
            <a-link
              @click="choice(record)"
              v-if="record.enable === 1 || showAll"
            >
              选择
            </a-link>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>

    <HeaderSettingCopy
      v-model:headerValues="headerValues"
      :define-headers="WorkshopHerders.herders"
      :type="WorkshopHerders.type"
    >
      <span />
    </HeaderSettingCopy>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, useSlots, reactive } from 'vue';
  import { TWorkshop } from '@/api/FactoryModeling/type';
  import { WorkshopHerders } from '@/utils/tableHerders';
  import { GetWorkshopPage } from '@/api/FactoryModeling';

  withDefaults(
    //参数说明
    defineProps<{
      disabled?: boolean;
      showAll?: boolean;
    }>(),
    {
      disabled: false,
      showAll: false,
    }
  );

  let inputValue = ref('');
  let searchForm = reactive<any>({
    state: 2,
  });
  const getPage = async (page: any) => {
    try {
      let res = await GetWorkshopPage({
        ...page,
        ...searchForm,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      return Promise.resolve();
    }
  };

  let visible = ref(false);

  const tableRef = ref();
  const Search = () => {
    tableRef.value.loadData();
  };
  let emit = defineEmits(['choice']);
  let choice = async (item: TWorkshop) => {
    emit('choice', item);
    inputValue.value = item.name || '';
    visible.value = false;
  };

  let headerValues = ref<any[]>([]);
  defineExpose({ inputValue });
</script>

<style scoped>
  .modalcantainer {
    position: relative;
    width: 100%;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
  }
</style>
